<template>
  <view class="box">
    <uv-navbar placeholder title="退货物流填写" :autoBack="true"></uv-navbar>
    <view class="mallProd m-t-32 p-24 m-b-20">
      <view class="font-24  text-greey m-b-26">
        订单编号: {{ wlInfo?.order_info.order_sn }}
      </view>
      <view v-for="(item, index) in wlInfo?.product_list" :key="index">
        <view class="flex m-b-20">
          <view class="position-relative">
            <uv-image width="192rpx" height="192rpx" :src="item.image"></uv-image>
          </view>
          <view class="flex-1 flex-col m-l-20">
            <view class="flex justify-bet align-ali">
              <view class="font-30">
                {{ item.product_name }}
              </view>
            </view>
            <view class="flex m-t-25 flex-wrap" v-if="item.add_type == 1">
              <view class="content font-28 m-r-20 p-x-14 p-y-6" v-for="(item2, index2) in item.suk.split(',')"
                :key="index2">
                {{ item2 }}
              </view>
            </view>
            <view class="m-b-30 m-t-10 " style="gap: 20rpx" v-else>
              <view class="font-26 font-weight-middle"> 实际周长:{{ item.reality_size }}cm</view>
              <view class="font-26 m-t-10 font-weight-middle"> {{ item.suk.line.product_name }}({{
                item.suk.line.suk
                }}){{ item.total_number || '0' }}颗珠子
                <!-- {{item.suk.materials.map(item2 => item2.product_name + 'x'
                  +
                  item2.number).join('、')}} -->
              </view>
            </view>
            <view class="flex m-t-28 justify-bet align-ali">
              <view class="font-26">
                x{{ item.number }}
              </view>
              <view class="font-26 font-weight-bold">
                ￥{{ item.total_price / 100 }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="mallProd m-t-20 p-30">
      <uv-form labelPosition="left" labelWidth="auto" :model="form" :rules="rules" ref="form">
        <uv-form-item label="快递公司" prop="name" borderBottom>
          <uv-input :disabled="wlInfo?.order_info?.express_company" maxlength="10" disabledColor="#FFF"
            v-model="form.name" border="none" placeholder="请输入快递公司">
          </uv-input>
        </uv-form-item>
        <uv-form-item label="快递单号" prop="orderSn" borderBottom>
          <uv-input :disabled="wlInfo?.order_info?.tracking_number" maxlength="30" disabledColor="#FFF"
            v-model="form.orderSn" border="none" placeholder="请输入快递单号">
          </uv-input>
        </uv-form-item>
      </uv-form>
    </view>
    <view class="submit m-t-34" @click="getSubmit" v-if="!wlInfo?.order_info?.tracking_number">
      确认
    </view>
  </view>
</template>

<script setup>
import { orderDetail, fillLogistics } from '@/api/api';
import { ref, onMounted, reactive } from 'vue';
import Logistics from '@/components/xinyu-logistics/xinyu-logistics.vue'
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady, onLoad } from '@dcloudio/uni-app';
import { os, sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
const orderSn = ref(null)//订单号
const wlInfo = ref(null)//订单详情
const form = ref({
  name: '',
  orderSn: '',
})
const rules = ref({
  'name': {
    type: 'string',
    required: true,
    message: '快递公司名称只能包含字母和中文',
    trigger: ['blur', 'change'],
    pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/
  },
  'orderSn': {
    type: 'string',
    required: true,
    message: '快递单号只能包含字母和数字',
    trigger: ['blur', 'change'],
    pattern: /^[a-zA-Z0-9]+$/
  },
})
onLoad((options) => {
  if (options.orderSn) {
    orderSn.value = options.orderSn
    querydata()
  }
})
// 订单详情
const querydata = () => {
  orderDetail({
    order_sn: orderSn.value
  }).then(res => {
    console.log(res, '订单详情');
    if (res.code == 1) {
      wlInfo.value = res.data
      if (res.data.order_info?.tracking_number) {
        form.value.name = res.data.order_info.express_company
        form.value.orderSn = res.data.order_info.tracking_number
      }
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }
  })
}
// 提交
const getSubmit = () => {
  form.value.validate().then(res => {
    uni.showModal({
      title: '提示',
      content: '是否确认，确认后无法修改',
      success: (res) => {
        if (res.confirm) {
          console.log('用户点击确定');
          fillLogistics({ express_company: form.value.name, tracking_number: form.value.orderSn, order_sn: orderSn.value }).then(res => {
            if (res.code == 1) {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1000)
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
            }
          })
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    })

  }).catch(errors => {
    uni.showToast({
      icon: 'error',
      title: errors[0].message
    })
  })
}
</script>

<style lang="scss">
.box {
  min-height: 100vh;
  background-color: #F5F5F5;
}

.mallProd {
  width: 686rpx;
  margin: 0 auto;
  background: #FFF;

  .content {
    background: #F3F3F3;
    border-radius: 12rpx;
  }
}

.yingyin {
  width: 100%;
  height: 42rpx;
  background: rgba(0, 0, 0, 0.4);
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 42rpx;
  color: #FFF;
  font-size: 24rpx;
}

.shu {
  width: 634rpx;
  height: 2rpx;
  background: #D9D9D9;

}
</style>
